<!-- 企业审批历史 -->
<template>
  <h2>审批审核管理</h2>

    <div id="right"
                    style="z-index: 999;position: absolute;right: 20%;background-color: white;height: 30px;overflow: hidden;border: #169bd5 1px solid;">
                    <span
                        style="width: 150px;background-color: #169bd5;color: white;height: 30px;display: inline-block;line-height: 30px;text-align: center;"
                        @click="open">自定义列表
                    </span>
                    <br>
                    <input type="checkbox" checked value="1" onclick="return false;"><span
                        style="font-size: 14px;">具体问题</span>
                    <br>
                    <input type="checkbox" checked onclick="return false;" value="2"><span style="font-size: 14px;">企业名称</span>
                    <br>
                    <input type="checkbox" checked onclick="return false;" value="3"><span style="font-size: 14px;">问题类别</span>
                    <br>
                    <input type="checkbox" checked onclick="return false;" value="4"><span style="font-size: 14px;">问题性质</span>
                    <br>
                    <input type="checkbox" checked onclick="return false;"  value="5"><span style="font-size: 14px;">办理状态</span>
                    <br>
                    <input type="checkbox" id="sx" value="6"><span style="font-size: 14px;">时限</span>
                    <br>
                    <input type="checkbox"  id="cszt" value="7"><span style="font-size: 14px;">超时状态</span>
                    <br>
                    <input type="checkbox" id="sssq" ><span style="font-size: 14px;">所属市区</span>
                    <br>
                    <input type="checkbox" checked onclick="return false;" ><span style="font-size: 14px;" value="9">处理单位</span>
                    <br>
                    <input type="checkbox" checked onclick="return false;" ><span style="font-size: 14px;" value="10">提交时间</span>
                    <br>
                    <input type="checkbox" id="jj"><span style="font-size: 14px;" value="11">解决/提报时间</span>
                    <br>
                    <input type="checkbox" id="tbr"><span style="font-size: 14px;" value="12">填报人</span>
                    <br>
                    <input type="checkbox" id="tbrzw"><span style="font-size: 14px;" value="13">填报人职务</span>
                    <br>
                    <input type="checkbox" id="tbrsj"><span style="font-size: 14px;" value="14">填报人手机</span>
                    <br>
                    <input type="checkbox" id="gddh"><span style="font-size: 14px;" value="14">固定电话</span>
                      

                </div>



  <div id="maxbox3" style="margin-top: 30px">
    <el-table :data="tableData" style="width: 100% ;color: black;" height="450" border="true"
                    :cell-style="{ textAlign: 'center', padding: '6px 0' }"
                    :header-cell-style="{ 'text-align': 'center', color: 'black', height: '40px' }">
                    <el-table-column fixed prop="id" label="序号" width="60" />
                    <el-table-column prop="question" label="具体问题" width="500" />
                    <el-table-column prop="enterpriseName" label="企业名称" width="180" />
                    <el-table-column prop="property" label="问题类别" width="180" />
                    <el-table-column prop="type" label="问题性质" width="100"/>
                    <el-table-column prop="zip" label="办理状态" width="200" />
                    <el-table-column prop="data1" label="超时状态" width="150"  v-if="c"/>
                    <el-table-column prop="data2" label="所属市区" width="150"  v-if="d"/>
                    <el-table-column prop="unit" label="处理单位" width="200"  />
                    <el-table-column prop="submitTime" label="提交时间" width="200" />
                    <el-table-column prop="data5" label="解决/提报时间" width="200"  v-if="e"/>
                    <el-table-column prop="data6" label="填报人" width="200"  v-if="f"/>
                    <el-table-column prop="data7" label="填报人手机" width="200"  v-if="h" />
                    <el-table-column prop="data8" label="固定电话" width="200"  v-if="i"/>
                    <el-table-column prop="data9" label="时限" width="200" v-if="b" />
                    <el-table-column prop="data10" label="填报人职务" width="200"  v-if="g"/>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small">查看</el-button>
                            <el-button link type="primary" size="small">处理</el-button>
                        </template>
                    </el-table-column>



                </el-table>
  </div>

</template>

<script lang="ts" setup>
import { ref, onMounted,onUpdated,watch,watchEffect} from "vue";


const input = ref("");





const tableData={
  id4:'',
  question:'',
  enterpriseName:'',
  property:'',
  type:'',
  data1:'',
  data2:'',
  zip:'',
  unit:'',
  submitTime:'',
  data5:'',
  data6:'',
  data7:'',
  data8:'',
  data9:'',
  data10:'',




}

/* 导出数据 */
const exportData = function () {};

/* 复选框 */
       
        let b:any=ref("true");
        let c:any=ref("true");
        let d:any=ref("true");
        let e:any=ref("true");
        let f:any=ref("true");
        let g:any=ref("true");
        let h:any=ref("true");
        let i:any=ref("true");

        const open = () => {
            const a: any = document.getElementById("right");
            const sx:any=document.getElementById("sx");
             b.value=sx.checked;
             const cszt:any=document.getElementById("cszt");
             c.value=cszt.checked;
             const sssq:any=document.getElementById("sssq");
             d.value=sssq.checked;
             const jj:any=document.getElementById("jj");
             e.value=jj.checked;
             const tbr:any=document.getElementById("tbr");
             f.value=tbr.checked;
             const tbrzw:any=document.getElementById("tbrzw");
             g.value=tbrzw.checked;
             const tbrsj:any=document.getElementById("tbrsj");
             h.value=tbrsj.checked;
             const gddh:any=document.getElementById("gddh");
             i.value=gddh.checked;



           
            if (parseInt(a.style.height) == 30) {
                a.style.height = "350px";
                // console.log(1111111);

            }
            else if (parseInt(a.style.height) == 350) {
                a.style.height = "30px";

            }

        }



  
  
</script>

<style>
#maxbox {
  position: absolute;
  width: 124px;
  height: 36px;
  right: 600px;
  top: 130px;
  z-index: 999;
  text-align: center;
  line-height: 40px;
  background-color: rgb(22, 155, 213);
  overflow: hidden;
  transition: all 0.2s linear;
  border-radius: 3px;
}
#maxbox div {
  width: 123px;
  color: white;
  font-size: 14px;
}
#maxbox div div{
  height: 30px;
  width: 122px;
}
#maxbox2 {
  width: 120px;
  height: 36px;
  background-color: rgb(22, 155, 213);
  text-align: center;
  line-height: 36px;
  position: absolute;
  right: 400px;
  top: 130px;
}

/* #clickbox {
  width: 120px;
  height: 36px;
  background-color: rgb(22, 155, 213);
  text-align: center;
  line-height: 36px;
}
#checkbox {
  overflow: hidden;
  height: 0px;
} */
.selectbox {
  width: 120px;
  height: 20px;
  border: 1px solid rgb(104, 100, 100);
  background-color: rgb(124, 122, 122);
  font-size: 14px;
}
.selectbox input{
  margin-left: -10px;
}
.selectbox label{
  color:white;
  font-size: 6px;
}
</style>